import React, { useEffect, useState } from 'react'
import "./index.less";
const qqchart = [

    {
        name: '上证50期指_走势',
        url: 'https://quote.eastmoney.com/gzqh/IHM0.html'
    },
    {
        name: '沪深300期指_走势',
        url: 'https://quote.eastmoney.com/gzqh/IFM0.html'
    },
    {
        name: '中证500期指_走势',
        url: 'https://quote.eastmoney.com/gzqh/ICM0.html'
    },
    {
        name: '中证1000期指_走势',
        url: 'https://quote.eastmoney.com/gzqh/IMM0.html'
    },
]
const etfchart = [

    {
        name: '上证50etf_走势',
        url: 'https://quote.eastmoney.com/sh510050.html'
    },
    {
        name: '沪深300etf_走势',
        url: 'https://quote.eastmoney.com/sh510300.html'
    },
    {
        name: '中证500etf_走势',
        url: 'https://quote.eastmoney.com/sh510500.html'
    },
    {
        name: '科创50etf_走势',
        url: 'https://quote.eastmoney.com/sh588000.html'
    },
    {
        name: '科创50板etf_走势',
        url: 'https://quote.eastmoney.com/sh588080.html'
    },
    {
        name: '创业板etf_走势',
        url: 'https://quote.eastmoney.com/sz159915.html'
    },
]
export const FarstLinkQQ = () => {
    const [courentIframeUrl, setCourentIframeUrl] = useState('https://quote.eastmoney.com/zs000001.html')

    const urlsConig = [
        {
            name: '上证指数_走势',
            url: 'https://quote.eastmoney.com/zs000001.html'
        },
        {
            name: '市场行情',
            url: 'https://quote.eastmoney.com/center/'
        },
        {
            name: '板块资金流',
            url: 'https://data.eastmoney.com/bkzj/hy.html'
        },
        {
            name: '大盘资金流',
            url: 'https://data.eastmoney.com/zjlx/dpzjlx.html'
        },
        {
            name: '中证500_T型报价',
            url: 'https://quote.eastmoney.com/center/gridlist.html#options_sazz500etf_txbj'
        },
        {
            name: '上证50_T型报价',
            url: 'https://quote.eastmoney.com/center/gridlist.html#options_sz50etf_txbj'
        },
        {
            name: '沪深300_T型报价',
            url: 'https://quote.eastmoney.com/center/gridlist.html#options_sahs300etf_txbj'
        },

        {
            name: '科创50_T型报价',
            url: 'https://quote.eastmoney.com/center/gridlist.html#options_kc50etf1_txbj'
        }, {
            name: '科创板50_T型报价',
            url: 'https://quote.eastmoney.com/center/gridlist.html#options_kc50etf2_txbj'
        },
        {
            name: '创业板_T型报价',
            url: 'https://quote.eastmoney.com/center/gridlist.html#options_secybetf_txbj'
        },
        ...etfchart,
        ...qqchart
    ]


    return <div >
        <div className='lableClass-wrapper'>
            {urlsConig.map(v => {
                return <div className={`lableClass ${v.url === courentIframeUrl ? 'active' : ''}`
                } onClick={() => {
                    setCourentIframeUrl(v.url)
                }}>{v.name}</div>
            })}</div>
        <iframe src={courentIframeUrl} className='courentIframeUrl'></iframe>
    </div>
}